"use client"

import { Workflow } from '@prisma/client'
import { Background, BackgroundVariant, Controls, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react'
import React from 'react'
import "@xyflow/react/dist/style.css"
import { CreateFlowNode } from '@/lib/workflow/createFlowNode'
import { TaskType } from '@/types/task'
import NodeComponent from './nodes/NodeComponent'

const nodeTypes = {
    FlowScrapeNode: NodeComponent
}

// 网格移动像素配置
const snapGrid: [number, number] = [50, 50]
// 设置节点视口自适应 也就是居中显式节点 padding 设置剩余空间大小
const fitViewOptions = {padding: 1}

function FlowEditor({ workflow }: { workflow: Workflow }) {
    // 节点
    const [nodes, setNodes, onNodesChange] = useNodesState([
        CreateFlowNode(TaskType.LAUNCH_BROWSER)
    ])
    // console.log(nodes)
    // 连线关系
    const [edges, setEdges, onEdgesChange] = useEdgesState([])
    return (
        <main className="h-full w-full">
            <ReactFlow
                nodes={nodes}
                edges={edges}
                onNodesChange={onNodesChange}
                onEdgesChange={onEdgesChange}
                nodeTypes={nodeTypes}
                // 开启网格对齐
                snapToGrid
                snapGrid={snapGrid}
                fitViewOptions={fitViewOptions}
                fitView
            >
                {/* 设置左上角放大缩小工具按钮 */}
                <Controls position='top-left' fitViewOptions={fitViewOptions} />
                {/* 背景 点图 */}
                <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
            </ReactFlow>
        </main>
    )
}

export default FlowEditor